<template>
	<div id="product" class="product_div">
		<div id="tab1">
			<div class="div-top">
				<img src="../../assets/product/zuo.png" />
				<div class="mian-search">
					<img src="../../assets/product/sousuo.png" />
					<p>请输入商品名称搜索</p>
				</div>
			</div>
			<div class="dianpu">
				<img src="../../assets/product/pinpai1.png" />
				<div class="content">
					<p>沃尔玛</p>
					<div class="xiangqing">
						<p>月售1万+</p>
						<p>起送¥0</p>
						<p>基础运费¥5</p>
					</div>
					<div class="vip">
						<span>VIP尊享满89元减4元运费券（每月3张）</span>
					</div>
				</div>
			</div>
			<div class="quanbu">
				<div class="llist">
					<p>全部商品</p>
					<ul>
						<li>秒杀</li>
						<li>新鲜水果</li>
						<li>休闲食品</li>
						<li>时令蔬菜</li>
						<li>肉蛋家禽</li>
					</ul>
				</div>
				<div class="plist">
					<div class="products" v-for="item in prlist1">
						<div class="p_img">
							<img :src="item.url" />
						</div>
						<div class="soles" style="flex: 1;">
							<div class="jg1">
								<p>{{item.danjia}}</p>
								<p>{{item.num}}</p>
							</div>
							<div class="jg2">
								<div class="g2_jg">
									<p>{{item.newprice}}</p>
									<p>{{item.oldprice}}</p>
								</div>
								<div class="jg2_an">
									<img :src="item.an" />
									<p>{{item.msum}}</p>
									<img :src="item.a" />
								</div>
							</div>
						</div>
					</div>
					<div class="products" v-for="item in prlist">
						<div class="p_img">
							<img :src="item.url" />
						</div>
						<div class="soles" style="flex: 1;">
							<div class="jg1">
								<p>{{item.danjia}}</p>
								<p>{{item.num}}</p>
							</div>
							<div class="jg2">
								<div class="g2_jg">
									<p>{{item.newprice}}</p>
									<p>{{item.oldprice}}</p>
								</div>
								<div class="jg2_an">
									<img :src="item.a" />
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="tab2" class="tab2_div">
			<div class="tab2_mianban">
				<div class="mianban_quan">
					<img src="../../assets/product/yes.png" />
					<p>全选</p>
					<p>清空购物车</p>
				</div>
				<div class="quan-sp">
					<div class="sp_sp1" v-for="item in xzlist">
						<div class="sp1_img1">
							<img src="../../assets/product/yes.png" />
						</div>
						<div class="sp1_img2">
							<img :src="item.url" />
						</div>
						<div class="jg3">
							<p>{{item.danjia}}</p>
							<div class="jg3_price">
								<p>{{item.newprice}}</p>
								<p>{{item.oldprice}}</p>
							</div>
						</div>
						<div class="aan">
							<img src="../../assets/product/jian.png" />
							<p>{{item.msum}}</p>
							<img src="../../assets/product/jia.png" />
						</div>
					</div>
				</div>
			</div>
			<div class="shop_bottom">
				<img src="../../assets/product/gouwulan.png" />
				<p>总计：</p>
				<p>￥128</p>
				<p>去结算</p>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				prlist1: [{
					url: require("../../assets/product/fanqie.png"),
					danjia: "番茄250g/份",
					num: "月售10件",
					newprice: "￥33.6",
					oldprice: "￥33.6",
					an: require("../../assets/product/jian.png"),
					msum: "88",
					a: require("../../assets/product/jia.png")
				}],
				prlist: [{
					url: require("../../assets/product/yingtao.png"),
					danjia: "樱桃250g/份",
					num: "月售10件",
					newprice: "￥33.6",
					oldprice: "￥33.6",
					a: require("../../assets/product/jia.png")
				}, {
					url: require("../../assets/product/pangxie.png"),
					danjia: "螃蟹250g/份",
					num: "月售10件",
					newprice: "￥33.6",
					oldprice: "￥33.6",
					a: require("../../assets/product/jia.png")
				}, {
					url: require("../../assets/product/chengzi.png"),
					danjia: "香橙250g/份",
					num: "月售10件",
					newprice: "￥33.6",
					oldprice: "￥33.6",
					a: require("../../assets/product/jia.png")
				}],
				xzlist: [{
						url: require("../../assets/product/fanqie.png"),
						danjia: "番茄250g/份",
						newprice: "￥33.6",
						oldprice: "￥33.6",
						msum: "1"
					},
					{
						url: require("../../assets/product/yingtao.png"),
						danjia: "樱桃250g/份",
						num: "月售10件",
						newprice: "￥33.6",
						oldprice: "￥33.6",
						msum: "1"
					}
				]
			}
		}
	}
</script>
<style scoped>
	.div-top {
		margin-top: 16px;
		display: flex;
		padding-left: 18.5px;
		padding-right: 18px;
		align-items: center;
	}

	.div-top img {
		width: 12.3px;
		height: 21.2px;
		padding-right: 16.2px;
	}

	.mian-search {
		height: 32px;
		background: #f5f5f5;
		border-radius: 16px;
		flex: 15;
		display: flex;
		align-items: center;
	}

	.mian-search img {
		width: 16px;
		height: 16px;
		padding-right: 12px;
		padding-left: 16px;
	}

	.mian-search p {
		font-size: 14px;
		color: #333333;
		line-height: 16px;
	}

	.dianpu {
		display: flex;
		padding-left: 8px;
		padding-bottom: 24px;
		padding-top: 16px;
	}

	.dianpu img {
		width: 56px;
		height: 56px;
		padding-right: 16px;
	}

	.content p {
		font-size: 16px;
		color: #333333;
		padding-bottom: 8px;
	}

	.xiangqing {
		display: flex;
	}

	.xiangqing p {
		padding-right: 16px;
		font-size: 13px;
		color: #333333;
		padding-bottom: 8px;
	}

	.content .vip span {
		font-size: 13px;
		color: #E93B3B;
	}

	.quanbu {
		display: flex;
		position: fixed;
		height: 100%;
		width: 100%;
	}

	.llist {
		background: #F5F5F5
	}

	.llist p {
		background: #FFFFFF;
		width: 100%;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 12px;
		padding-top: 12px;
		border-radius: 2px;
	}

	.llist ul {
		list-style: none;
		width: 100%;
		padding-top: 12px;
	}

	.llist li {
		height: 40px;
		border-radius: 2px;
		text-align: center;
	}

	.plist {
		flex: 5;
		background: #FFFFFF;
	}

	.products {
		border-bottom: 1px solid #f5f5f5;
		padding-bottom: 12px;
		margin-left: 16px;
		margin-right: 16px;
		display: flex;
	}

	.p_img img {
		width: 68px;
		height: 68px;
		padding-right: 16px;
	}

	.jg1 :nth-child(1) {
		font-size: 14px;
		color: #ff5500;
		padding-bottom: 6px;
	}

	.jg1 :nth-child(2) {
		font-size: 12px;
		color: #333333;
		line-height: 16px;
		padding-bottom: 6px;
	}

	.jg2 {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	.g2_jg {
		display: flex;
		align-items: center;
	}

	.g2_jg :nth-child(1) {
		font-size: 14px;
		color: #E93B3B;
		padding-right: 12px;
	}

	.g2_jg :nth-child(2) {
		font-size: 10px;
		color: #999999;
		text-decoration: line-through;
	}

	.jg2_an {
		display: flex;
	}

	.jg2_an img {
		height: 20px;
		width: 20px;
	}

	.jg2_an p {
		font-size: 14px;
		color: #333333;
		padding-right: 10px;
		padding-left: 10px;
	}

	.shop_bottom {
		background: #FFFFFF;
		height: 49px;
		width: 100%;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #F1F1F1;
	}

	.shop_bottom img {
		height: 26px;
		margin-left: 24px;
	}

	.shop_bottom :nth-child(2) {
		font-size: 12px;
		padding-left: 32px;
		color: #333333;
		flex: 1;
	}

	.shop_bottom :nth-child(3) {
		font-size: 18px;
		color: #E93B3B;
		flex: 4;
	}

	.shop_bottom :nth-child(4) {
		font-size: 14px;
		color: #FFFFFF;
		background-color: #1FA4FC;
		padding: 14px 28px 14px 28px;
	}

	#tab1 {
		position: absolute;
		z-index: 1;
	}

	#tab2 {
		position: absolute;
		z-index: 2;
		top: 0px;
		left: 0;
		height: 189%;
		width: 100%;
	}

	#product {
		height: 100%;
		position: fixed;
		width: 100%;
	}

	.product_div {
		position: relative;
	}

	.tab2_div {
		background: rgba(0, 0, 0, 0.50);
		align-items: center;
	}

	.tab2_mianban {
		background-color: #FFFFFF;
		height: 65%;
		width: 100%;
		position: absolute;
		bottom: 0;
	}

	.mianban_quan {
		display: flex;
		padding: 16.4px 18.4px 16.4px 18px;
		border-bottom: 1px solid #F1F1F1;
		;
		padding-bottom: 18px;
		margin-bottom: 16px;
	}

	.mianban_quan :nth-child(1) {
		width: 19.2px;
		height: 19.2px;
		padding-right: 8.4px;
	}

	.mianban_quan :nth-child(2) {
		flex: 2;
		font-size: 14px;
		color: #333333;
		line-height: 16px;
	}

	.mianban_quan :nth-child(3) {
		font-size: 14px;
		color: #333333;
		text-align: right;
		line-height: 16px;
	}
	
	.quan-sp{
		padding: 0 18.4px 16px 18px;
	}

	.sp_sp1 {
		display: flex;
		align-items: center;
		padding-bottom: 16px;
	}

	.sp1_img1 img {
		width: 19.2px;
		height: 19.2px;
		padding-right: 16.4px;
	}

	.sp1_img2 img {
		width: 46px;
		height: 46px;
		padding-right: 16px;
	}
	
	.jg3{
		flex:1;
	}

	.jg3 p {
		font-size: 14px;
		color: #333333;
	}
	
	.jg3_price{
		display: flex;
		align-items: flex-end; 
	}
	
	.jg3_price :nth-child(1){
		font-size: 14px;
		color: #E93B3B;
	}
	.jg3_price :nth-child(2){
		font-size: 10px;
		color: #999999;
		text-decoration: line-through;
	}
	.aan{
		display: flex;
		justify-content: center;
	}
	.aan img{
		width: 19.2px;
		height: 19.2px;
	}
	.aan p{
		font-size: 14px;
		color: #333333;
		text-align: center;
		padding-left: 16px;
		padding-right: 16px;
	}
</style>
